import { GetUserInfo, UserInvites } from '@/api/user';
import { SHARE_IMAGE } from '@/utils';
import { Button, Image, Text, View } from '@tarojs/components';
import Taro, { useShareAppMessage } from '@tarojs/taro';
import classNames from 'classnames';
import dayjs from 'dayjs';
import { useRequest } from 'taro-hooks';
import { TemplateMessage } from 'types/user';

export default function Page() {
  const { data } = useRequest(UserInvites);
  const { data: user } = useRequest(GetUserInfo);

  useShareAppMessage(() => {
    return {
      title: '我发现了一个有价值的企业服务平台邀请你加入',
      imageUrl: SHARE_IMAGE,
      path: `/pages/login/share?refer_code=${user?.refer_code || ''}`,
    };
  });

  return (
    <>
      <View
        className='h-[520px] bg-cover'
        style={{
          backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/inv-head-bg.png)`,
        }}
      ></View>

      <View className=' bg-white mx-4 rounded-lg p-4 -mt-[140px]'>
        <View className='flex items-center'>
          <Text className=' block text-sm'>发起邀请</Text>
          <View
            className='w-[460px] h-[36px] bg-cover text-xs text-white pl-[20px] leading-[36px] ml-2'
            style={{
              backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/inv-2.svg)`,
            }}
          >
            ·邀请好友并注册成为会员，可获得积分奖励
          </View>
        </View>
        <View className=' grid grid-cols-3 bg-[#EFF3FA] mt-2 rounded-lg'>
          {/* 分享二维码 */}
          <View
            className=' text-center py-4'
            onClick={async () => {
              //@ts-ignore
              await Taro.requestSubscribeMessage({
                tmplIds: [TemplateMessage.邀请结果提醒],
              });
              Taro.navigateTo({ url: '/pages/my/invite/poster' });
            }}
          >
            <Image
              src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/inv-icon-1.svg'
              className=' block w-[44px] h-[44px] mx-auto'
            />
            <Text className=' text-xs text-black block mt-2'>分享二维码</Text>
          </View>

          {/* 分享小程序 */}
          <Button
            openType='share'
            className=' text-center py-4 bg-transparent after:hidden'
          >
            <Image
              src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/inv-icon-2.svg'
              className=' block w-[44px] h-[44px] mx-auto'
            />
            <Text className=' text-xs text-black block mt-2'>分享小程序</Text>
          </Button>

          {/* 分享邀请码 */}
          <View
            className=' text-center py-4'
            onClick={() => {
              if (!user?.refer_code)
                return Taro.showToast({ title: '邀请码不存在', icon: 'none' });
              Taro.setClipboardData({
                data: user?.refer_code,
                success: function () {
                  Taro.showToast({ title: '邀请码已复制' });
                },
              });
            }}
          >
            <Image
              src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/inv-icon-3.svg'
              className=' block w-[44px] h-[44px] mx-auto'
            />
            <Text className=' text-xs text-black block mt-2'>分享邀请码</Text>
          </View>
        </View>
      </View>

      <View className=' bg-white rounded-lg mt-4 mx-4 p-4'>
        <Text className=' text-sm block'>邀请记录</Text>
        <View
          className='bg-cover mt-2 text-xs p-2 flex items-center justify-center flex-wrap'
          style={{
            backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/inv-1.svg)`,
          }}
        >
          您已累计成功邀请 <Text className='text-warn'>{data?.total}</Text>
          人，奖励 <Text className='text-warn'>{data?.total_points}</Text> 积分
          {Boolean(user?.dj_points) && (
            <Text className='text-gary3'>（{user?.dj_points}积分冻结中）</Text>
          )}
        </View>

        {data?.list?.map((item) => (
          <View
            key={item.id}
            className=' py-4 border-b border-solid border-gary2'
          >
            <View className='flex justify-between items-center'>
              <View className=' text-sm font-bold text-black flex items-center'>
                {item.user?.name}
                {item.status === 1 && (
                  <View className='bg-gary2 text-gary3 text-[20px] p-1 ml-2 leading-none rounded-sm'>
                    冻结中
                  </View>
                )}
                {item.status === 2 && (
                  <View className='bg-gary2 text-success text-[20px] p-1 ml-2 leading-none rounded-sm'>
                    已到账
                  </View>
                )}
              </View>
              <Text className=' text-xs text-gary3'>
                邀请时间：
                {item.re_time && dayjs(item.create_time).format('YYYY-MM-DD')}
              </Text>
            </View>
            <View className=' flex items-center text-xs mt-1'>
              <Text className=' text-gary3'>{item.user?.company}</Text>
              <Text
                className={classNames('ml-auto', {
                  'text-success': item.invite_status.includes('成功'),
                  'text-warn': item.invite_status.includes('审核'),
                  'text-gary4': item.invite_status.includes('失败'),
                })}
              >
                {item.invite_status}
              </Text>
            </View>
          </View>
        ))}
      </View>
    </>
  );
}
